<template>
    <div>
      <Top/>
       <i class="iconfont icon-rizhi"><span>分享</span></i>
      <Header ref="Header"/>
      <div class="banner">
        <!-- <img :src="banner_src" lazy/> -->
        <div class="banner-textBox">
          <div class="textBox-warp">
            <div class="bt-lt">
                <h2>Eddue Information industry</h2>
                <div class="zy z1">专注于</div>
                <div class="zy z2">教育信息化解决方案</div>
                <p>
                  {{resName}}
                </p>
                <div  @click="goTo" class="more">more +</div>
                
            </div>

            <div class="bt-rg">
              <div class="video-box">
                <VideoPlay ref="VideoPlay"  />
              </div>

            </div>
          </div>
        </div>
      </div> 

      <!-- <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2> -->


      <slide-show :interval="interval"/>
      <Footer/>
      <!-- <New/> -->
    </div>
</template>

<script>
// import Top from '~/components/Top.vue'
import Header from '~/components/Header.vue'
import VideoPlay from '~/components/VideoPlay.vue'
import slideShow from '~/components/slideShow.vue'
import New from './new.vue'
import axios from 'axios'
import  PDFObject  from 'pdfobject'
export default {
  components: {
    Header,VideoPlay,slideShow,New
  },
  transition:'layout',
  data () {
    return {
      interval:2500,
      title: '首页',
      banner_src: require('../static/banner01.jpg'),
      src:'https://media.w3.org/2010/05/sintel/trailer.mp4', //测试地址
      formDate:{
        pageNo: 1,  
        pageSize:10,
        resType:0
      },
      resName:''
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: '' }
      ]
    }
  },
 
  computed: {
    player() {
      return this.$refs.videoPlayer.player//自定义播放
    }
  },
  mounted() {
    // setTimeout(()=>{ this.loading= false }, 200);
  },
  methods:{  
    goTo(){
      this.$router.push({
          path: '/resource',
          query: {
              id: 1,
          }
      })
      this.$refs.Header.isShow = true
    },
    
  }
  // async asyncData() {
  //   let { data } = await axios.post('/web/tAreaResource/initialization')
  //   console.log(data)
  //   return { info: data }
  // }
}
</script>
<style>
.video-js.vjs-ended .vjs-big-play-button, .video-js.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button{
  left:50%;
  top:50%;
  margin:-20.5px 0 0 -43px ;
  border:none;
}
.vjs-poster{
  background-size: 100%;
}
</style>
<style  scoped lang="scss" >
.banner {
  background-image: url('~static/banner01.jpg');
  background-repeat: no-repeat;
  background-size: 100% 802px;
  min-height: 802px;
  // img{
  //   width: 100%;
  //   overflow-x: hidden;
  // }
  .banner-textBox{
    @include max-content;
    .textBox-warp{
      padding-top: 98px;
      .bt-lt{
        float: left;
        h2{
          color: #186ae4;
          font-size: 24px;
        }
        .zy{
          font-size: 50px;
          line-height: 50px;
          color: #fff;
        }
        .z1{
          margin-top: 52px;
          margin-bottom: 22px;
        }
        .z2{
          margin-bottom: 52px;
        }
        p{
          margin-top: -8px;
          color: #eeeeee;
          max-width: 448px;
          height: 122px;
          overflow: hidden;
          line-height: 40px;
          font-size: 24px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;

        }
        .more{
          cursor: pointer;
          margin-top: 170px;
          display:inline-block;
          font-size: 18px;
          line-height: 14px;
          color: #fff;
          padding: 14px 35px;
          background: #0191fe;
          border-radius: 50px;
        }
      }
      .bt-rg{
        float: right;
        margin-top: 64px;
        .video-box{
          max-width: 644px;
          height: 322px;
          .vue-plyr{
            width: 644px;
            height: 322px;
          }
        }
      }
    }
  }
}
</style>



